<template>
  <div class="table-container">
    <!-- :header-cell-style="{background:cellbackground,color:cellColor}" -->
    <el-table
      v-loading="options.loading"
      ref="multipleTable"
      :data="tableData"
      :stripe="options.stripe"
      :header-cell-style="{ background: '#F2F6FC', color: '#606266' }"
      tooltip-effect="dark"
      style="width: 100%"
      fit
      border
      highlight-current-row
      @row-click="rowClick"
      @selection-change="handleSelectionChange"
    >
      <el-table-column v-if="options.selection" type="selection" width="55" align="center"/>
      <el-table-column v-if="options.showIndex" :label="$t('index')" type="index" width="55" align="center">
        <template slot-scope="scope">
          <span v-if="page&&pageSize">{{ (page-1)*pageSize+scope.$index+1 }}</span>
          <span v-else>{{ scope.$index+1 }}</span>
        </template>
      </el-table-column>
      <el-table-column
        v-for="(item,index) in tableColumns"
        :key="index"
        :label="item.label"
        :prop="item.prop"
        :show-overflow-tooltip="options.showTooltip?options.showTooltip:true"
        :align="options.align"
        :width="item.width?item.width:null"
        header-align="center"
      >
        <template slot-scope="scope">
          <slot v-if="item.slot" :name="item.prop" v-bind="scope" />
          <span v-else>{{ scope.row[item.prop] }}</span>
        </template>
      </el-table-column>
      <el-table-column
        v-if="operation.isShow"
        :label="operation.label"
        :prop="operation.label"
        :width="operation.width?operation.width:null"
        header-align="center"
        align="center"
      >
        <template slot-scope="scope">
          <el-button type="text" @click="scopedHandle(scope.row)">{{ operation.label }}</el-button>
        </template>
      </el-table-column>
      <slot/>
    </el-table>
  </div>
</template>
<script>
export default {
  name: 'MyTable',
  props: {
    tableData: {
      type: Array,
      default: () => ([])
    },
    options: {
      type: Object,
      default: () => ({})
    },
    operation: {
      type: Object,
      default: () => ({})
    },
    tableColumns: {
      type: Array,
      default: () => ([])
    },
    page: {
      type: Number,
      default: 0
    },
    pageSize: {
      type: Number,
      default: 0
    },
    cellbackground: {
      type: String,
      default: '#55A7FB'
    },
    cellColor: {
      type: String,
      default: '#fff'
    }
  },

  data() {
    return {
      multipleTable: [],
      selectedIndex: ''
    }
  },
  methods: {
    // 选中checkbox
    handleSelectionChange(val) {
      this.multipleTable = val
      this.$emit('rowClick', this.multipleTable)
    },
    // 当某一行被点击时
    rowClick(val, column, event) {
      this.multipleTable.push(val)
      this.$refs.multipleTable.clearSelection(val)
      this.$refs.multipleTable.toggleRowSelection(val)
      this.$emit('rowClick', this.multipleTable)
    },
    // 查看详情
    scopedHandle(val) {
      this.$emit('scopedHandle', val)
    }
  }
}
</script>
<style lang="scss" scoped>
// .el-table{
//   // border: 1px solid #6EB1F0;
// }
// ::v-deep .el-table td {
//   padding: 4px 0;
// }
::v-deep .el-table th, .el-table td {
  padding: 8px 0;
}
// ::v-deep .el-table--border {
//   border-radius: 6px;
// }
// // ::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td{
// // background-color: #fff3e0 !important;
// // }
// ::v-deep .el-table__body tr.current-row>td{
//   background-color: #abd8fa !important;
//   color: #fff !important;
// }
</style>
